<!-- 未回复帖子详情 -->
<template>
	<view>
		<view class="container">
			<uni-nav-bar title="帖子详情" backgroundColor="#fff" color="#000" statusBar="true" @clickLeft="back()"
				left-icon="arrowleft">
			</uni-nav-bar>
			<view class="body">
				<scroll-view class="select-facility-view" @scrolltolower="handleScrolltolowerone()" scroll-y="true"
					:style="{height:setcollapseheight() + 'px'}">
					<view class="main">
						<view class="content">
							<!-- 标题 -->
							<view class="oneline">
								<view class="serialnumber"></view>
								<view class="title">
									{{postList.invitationTitle}}
								</view>
							</view>
							<!-- 内容 -->
							<view class="twoline">
								<view class="img">
									<image src="@/static/index-message/V.png"></image>
								</view>
								<view class="name1">
									{{postList.invitationContent}}
								</view>
							</view>
							<view class="twoline">
								<view class="img2">
									<image src="@/static/index-message/jingliren.png"></image>
								</view>
								<view class="name">
									提问人：{{userName}}
								</view>
							</view>
							<view class="twoline">
								<view class="img3">
									<image src="@/static/index-message/unit.png"></image>
								</view>
								<view class="name">
									提问日期：{{postList.createTime}}
								</view>
							</view>
							<view class="twoline" style="margin-bottom: 16rpx;">
								<view class="img3">
									<image src="@/static/index-message/liulanliang.png"></image>
								</view>
								<view class="name">
									浏览量：{{postList.pageView}}
								</view>
							</view>
							<view class="firstimg" v-for="item in imgList1" :key="item.invitationImgId"
								v-if="item.invitationImgUrl">
								<image :src="item.invitationImgUrl" @click="clickImg(item.invitationImgUrl)"></image>
							</view>
							<view class="firstvideo" v-if="item.invitationVedioUrl" v-for="(item,index) in videoList1"
								:key="index">
								<MyVideo :videoUrl="item.invitationVedioUrl"></MyVideo>
							</view>
							<!-- 交流表 -->
							<view class="publish" v-if="communicationList.length>0"
								v-for="(item,index) in communicationList" :key="index">
								<view class="publishuser">
									<view class="left">
										<template>
											<view class="icon" v-if="item.user && item.user.userType === 'expert_user'">
												<image src="@/static/index-message/expert.png" mode=""></image>
											</view>
											<view class="icon1" v-else>
												<image src="@/static/index-message/jingliren.png" mode=""></image>
											</view>
										</template>
										<view class="name">
											{{item.user.nickName}}
										</view>
									</view>
									<view class="right">
										{{item.createTime}}
									</view>
								</view>
								<view class="publishcontent">
									<view class="method">
										{{item.exchangeContent}}
									</view>
								</view>
								<view class="publishImg" v-if="item.picUrls" v-for="it in item.picUrlList">
									<image :src="it" mode="" style="margin: 10rpx 0;" @click="clickImg(it)"></image>
								</view>
								<view class="videoImg" style="margin-top: 20rpx;" v-if="item.vedioUrls"
									v-for="it in item.vedioUrlList">
									<MyVideo :videoUrl="it" class="video"></MyVideo>
								</view>
							</view>
						</view>
						<view class="noReply" v-if="!communicationList.length>0">
							<view class="text">
								回复
							</view>
							<view class="img">
								<image src="@/static/index-message/zanwuxiaoxi.png" mode=""></image>
							</view>
							<view class="tex">
								专家暂未回复
							</view>
						</view>
					</view>

				</scroll-view>
				<view class="top" v-if="!communicationList.length>0">
					<view class="btns">
						<view class="btn btn1">
							<u-button type="primary" @click="editPost()" text="修改问诊贴" shape="circle"
								style="background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);"></u-button>
						</view>
						<view class="btn">
							<u-button type="primary" @click="delPost()" text="删除问诊贴" shape="circle"
								style="background: #FFFFFF;color: #000;"></u-button>
						</view>
					</view>
					<view class="bottom-ios-line"></view>
				</view>

			</view>
		</view>
		<!-- 弹框 -->
		<u-popup :show="show" mode="center" width="700rpx" height="700rpx" @close="show=false">
			<view class="pop">
				<view class="input">
					<view class="top">
						帖子标题：
					</view>
					<u--textarea :confirmType="null" style="margin-bottom: 20rpx;" @change='dontMsg'
						v-model="postTitle" placeholder="请输入标题" />
				</view>
				<view class="replaysContent">
					<view class="top">
						帖子内容：
					</view>
					<u--textarea :confirmType="null" style="margin-bottom: 20rpx;" @change='dontMsg'
						v-model="replayInfo" placeholder="请输入回复内容" />
				</view>
				<view class="picture">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
						name="1" multiple deletable :maxCount="6">
						<view style="display: flex;">
							<view class="text">
								上传图片
							</view>
						</view>
					</u-upload>
				</view>
				<!-- 视频 -->
				<view class="picture">
					<u-upload :fileList="fileList2" @afterRead="afterVideoRead" name="2" multiple :maxCount="1"
						accept="video" @delete="deleteVedio">
						<view style="display: flex;">
							<view class="text">
								上传视频
							</view>
						</view>
					</u-upload>
				</view>
				<u-button type="primary" @click="confirm" text="确定" shape="circle"
					style="background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);"></u-button>
			</view>
		</u-popup>
		<u-popup :show="showImg" mode="center" width="100%" height="100%" @close="showImg=false">
			<view class="showImg">
				<image :src="showImgUrl" mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		baseurl,
		cloudBaseurl,
		agrServiceUrl
	} from '@/config/baseUrl.js'
	import bottomTabar from '../../../components/bottom-tabaruser/index.vue'
	import navBar from '../../../components/nav-bar/index.vue'
	import postApi from '@/api/socialized-servce/specialist-consultation/user-module/consultation-list/index.js'
	import Api from '@/api/socialized-servce/specialist-consultation/user-module/my-interrogation/interrogation-detail/index.js'
	import MyVideo from "@/subPage1/components/myVideo/myVideo.vue"
	export default {
		name: 'invitation-details',
		components: {
			bottomTabar,
			navBar,
			MyVideo
		},
		data() {
			return {
				// 第一条问题和恢复
				postList: {},
				communicationList: [],
				// 上拉加载更多
				shoppingMes: {
					nowpage: 1,
					total: 0,
				},
				userName: '',
				option: '',
				invitationId: 0,
				replayInfo: '', //回复内容
				postTitle: '',
				fileList: [],
				pictureIdList: [],
				fileList2: [],
				collectData: {
					imgList: [],
					vedioList: [],
					picUrlList: [],
					vedioUrlList: []
				},
				type: '',
				duration: 0, //视频时长
				imgList1: [],
				videoList1: [],
				show: false,
				show1: false,
				value: 0,
				count: 4,
				evaluateContent: '',
				disableMsg: true,
				showImg: false,
				showImgUrl: ''
			}
		},
		onLoad(option) {
			this.invitationId = option.id
		},
		onShow() {
			this.getPostList()
			this.getCommunicationList()
		},
		methods: {
			clickImg(e) {
				this.showImg = !this.showImg
				this.showImgUrl = e
			},
			back() {
				uni.redirectTo({
					url: '/subPage1/socialized-service/specialist-consultation/user-module/my-consultation/my-consultation'
				})
			},
			async getPostList() {
				let params = {}
				let res = await Api.queryPostList(params, this.invitationId)
				if (res.code == 200) {
					this.postList = res.data
					this.userName = this.postList.publisher.nickName || ''
					this.imgList1 = res.data.imgList
					this.videoList1 = res.data.vedioList
				}
			},
			// 获取交流列表
			async getCommunicationList() {
				let params = {
					invitationId: this.invitationId
				}
				let res = await Api.queryCommunicationList(params)
				if (res.code === 200) {
					this.communicationList = res.data
				}
			},
			//上滑加载
			handleScrolltolowerone() {
				console.log('下拉刷新');

			},
			dontMsg() {
				console.log('222');
			},
			//  设置可选择设施高度
			setcollapseheight() {
				let winHeight = 0
				let topheightone = uni.upx2px(136)
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				})
				let oldHeight = uni.upx2px(156)
				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight
				// #endif
				return winHeight
			},
			// 收集图片
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.collectData.picUrlList.splice(event.index, 1)
			},
			deleteVedio(event) {
				this.fileList2.splice(event.index, 1)
				this.collectData.vedioUrlList.splice(event.index, 1)
			},
			// 添加图片
			async afterRead(event) {
				this.type = 'image'
				console.log(event);
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.afterfileList = this.fileList
				console.log(this.fileList);

			},
			// 上传视频
			async afterVideoRead(event) {
				this.type = 'video'
				this.duration = event.file[0].duration

				console.log(event.file[0].duration, '视频');
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList2.length
				lists.map((item) => {
					this.fileList2.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList2[fileListLen]
					this.fileList2.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.afterfileList = this.fileList2
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: agrServiceUrl + `common/file/upDown/getUploadUrl?moduleType=XG_ORGANIZATION&upDownType=FTP`,
						filePath: url,
						name: 'file',
						header: {
							// "moduleType": 'EXPERT',
							'token': uni.getStorageSync("satoken") || ''
						},
						formData: {},
						success: async (res) => {
							const dataObj = JSON.parse(res.data);
							const data = dataObj.data;
							console.log(data, 'ww');
							resolve(data);
							if (this.type == 'image') {
								this.collectData.picUrlList.push(`${agrServiceUrl}` + data.slice(
									1))
							} else {
								this.collectData.vedioUrlList.push(`${agrServiceUrl}` + data.slice(
									1))
							}
							console.log(this.collectData, this.type);
							if (this.pictureIdList.includes(data)) return
							else {
								setTimeout(() => {
									this.pictureIdList.push(data)
								}, 1000)

							}
						},
						fail: () => {
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							})
						}
					});
				})
			},
			// 删除帖子
			async delPost() {
				let res = await postApi.delPost(this.invitationId)
				if(res.code === 200) {
					uni.redirectTo({
						url: '/subPage1/socialized-service/specialist-consultation/user-module/my-consultation/my-consultation'
					})
				}
			},
			// 编辑帖子
			editPost() {
				this.fileList = []
				this.fileList2 = []
				this.collectData.picUrlList = []
				this.collectData.vedioUrlList = []
				if(this.postList.imgList.length > 0) {
					this.postList.imgList.forEach(el =>{
						this.fileList.push({
							url: el.invitationImgUrl
						})
						this.collectData.picUrlList.push(el.invitationImgUrl)
					})
				}
				if(this.postList.vedioList.length > 0) {
					this.postList.vedioList.forEach(el =>{
						this.fileList2.push({
							url: el.invitationVedioUrl,
							duration: el.duration,
							name: el.invitationVedioName
						})
						this.collectData.vedioUrlList.push(el.invitationVedioUrl)
					})
				}
				this.replayInfo = this.postList.invitationContent
				this.postTitle = this.postList.invitationTitle
				this.show = true
			},
			async confirm() {
				let params = {
					invitationContent: this.replayInfo,
					invitationTitle: this.postTitle,
					invitationTypeId: this.postList.invitationTypeId,
					invitationId: this.postList.invitationId,
					imgList: [],
					vedioList: []
				}
				params['imgList'] = []
				params['vedioList'] = []
				this.collectData.picUrlList.forEach(el=>{
					params.imgList.push({
						invitationImgUrl: el
					})
				})
				this.collectData.vedioUrlList.forEach(el=>{
					params.vedioList.push({
						invitationVedioUrl: el,
						duration: this.fileList2[0].duration,
						invitationVedioName: this.fileList2[0].name
					})
				})
				let res = await postApi.editPost(params)
				if(res.code===200) {
					this.getPostList()
					this.show = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-facility-view {
		padding-top: 20rpx;
	}

	.container {
		background-color: #F5F6FA;

		.body {
			padding: 0 40rpx;

			.main {
				padding-top: 20rpx;
				overflow: hidden;
				background: #f5f6fa;

				.content {
					// margin: 0 20rpx;
					padding-bottom: 20rpx;
					background-color: #fff;
					border-radius: 20rpx;

					.oneline {
						padding-top: 36rpx;
						position: relative;

						.serialnumber {
							position: absolute;
							top: 44rpx;
							left: 0;
							width: 10rpx;
							height: 28rpx;
							background-color: #91743E;
						}

						.title {
							padding-left: 24rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #91743E;
						}
					}

					.twoline {
						margin-top: 30rpx;
						display: flex;
						padding: 0 30rpx;

						.img {
							width: 35rpx;
							height: 30rpx;
							margin-right: 26rpx;

							image {
								width: 35rpx;
								height: 30rpx;
							}
						}

						.img2 {
							width: 30rpx;
							height: 30rpx;

							image {
								position: relative;
								z-index: 999;
								width: 27rpx;
								height: 35rpx;
							}
						}

						.img3 {
							width: 35rpx;
							height: 26rpx;

							image {
								position: relative;
								z-index: 999;
								width: 35rpx;
								height: 26rpx;
							}
						}

						.name {
							padding-left: 24rpx;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
						
						.name1 {
								overflow: hidden;
								padding: 0 4rpx;
							}
					}

					.firstimg {
						padding: 0 28rpx;
						height: 320rpx;
						margin-bottom: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.firstvideo {
						padding: 0 28rpx;
						height: 320rpx;
						padding-bottom: 20rpx;

						::v-deep iframe {
							width: 100% !important;
							height: 320rpx !important;
						}
					}

					.publish {
						padding: 30rpx 0;
						background: #FFFFFF;
						box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);

						.publishuser {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 36rpx;
							font-size: 28rpx;
							font-family: Arial-Regular, Arial;
							font-weight: 400;
							color: #606060;

							.left {
								display: flex;
								align-items: center;

								.icon {
									width: 26rpx;
									height: 28rpx;
									margin-right: 10rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}

								.icon1 {
									width: 26rpx;
									height: 32rpx;
									margin-right: 10rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}
							}
						}

						.publishcontent {
							margin-top: 24rpx;
							padding: 0 80rpx;
							font-size: 26rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #606060;
						}

						.publishImg {
							margin-top: 20rpx;
							width: 100%;
							height: 408rpx;

							image {
								width: 100%;
								height: 408rpx;
							}
						}

						.videoImg {
							margin-top: 20rpx;
							width: 100%;
							height: 408rpx;

							::v-deep iframe {
								width: 100% !important;
								height: 408rpx !important;
							}
						}
					}

				}

				.noReply {
					margin-top: 32rpx;

					.text {
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #757575;
					}

					.img {
						position: relative;
						margin-top: 20rpx;
						width: 100%;
						height: 170rpx;
						display: flex;
						text-align: center;
						align-items: center;

						image {
							position: absolute;
							left: 50%;
							transform: translateX(-50%);
							width: 170rpx;
							height: 170rpx;
						}
					}

					.tex {
						width: 100%;
						text-align: center;
						margin-top: 12rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #BEBEBE;
					}
				}

			}

			.top {
				position: fixed;
				width: 80%;
				bottom: 44rpx;
				left: 50%;
				transform: translateX(-50%);

				.btns {
					position: relative;
					display: flex;
					justify-content: space-around;

					.btn {
						width: 322rpx;
						height: 58rpx;
					}

					.btn1 {
						margin-right: 18rpx;
					}
				}
			}

		}


	}

	.pop {
		width: 600rpx;
		padding: 20rpx;
		font-size: 30rpx;

		.picture {
			height: 96rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
	
			.text {
				font-size: 24rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #2265FB;
				text-decoration: underline;
			}
		}
		.input,.replaysContent {
			display: flex;
			align-items: center;
		}
	}
	
	
	/deep/ .u-upload__wrap {
		display: flex;
		align-items: center;
	}
	
	/deep/ .u-upload__wrap__preview__other {
		height: 80rpx !important;
		width: 80rpx !important;
	}
	
	/deep/ .u-upload__deletable {
		z-index: 99 !important;
	}
	/deep/ .uni-system-preview-image {
		z-index: 999999!important;
	}
	/deep/ .u-popup {
		position: relative;
		z-index: 999;
	}
	
	/deep/ .uicon-close {
		font-size: 22rpx!important;
	}
</style>